﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="demoTab.aspx.cs" Inherits="jQueryTools_Tab_demoTab" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>
    <link href="tabs.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
      .tabs-wrapper
      {
        width:780px;    
      }
      
      .panes div {
        display:none;       
        padding:15px 10px;
        border:1px solid #999;
        border-top:0;
        height:100px;
        font-size:14px;
        background-color:#fff;
      }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    
    <div>
      <ul class="aaatabs"></ul>
    </div>
    <div class="tabs-wrapper">
      <!-- the tabs -->
      <ul class="tabs">
	      <li><a href="#">Tab 1</a></li>
	      <li><a href="#">Tab 2</a></li>
	      <li><a href="#">Tab 3</a></li>
      </ul>

      <!-- tab "panes" -->
      <div class="panes">
	      <div>First tab content. Tab contents are called "panes"</div>
	      <div>Second tab content</div>
	      <div>Third tab content</div>
      </div>
    </div>
    </form>
    <script type="text/javascript">
      // perform JavaScript after the document is scriptable.
      $(function() {
        // setup ul.tabs to work as tabs for each div directly under div.panes
        $("ul.tabs").tabs("div.panes > div");
      });
    </script>
</body>

</html>
